﻿<template>
    <div class="hidden h100 flex-column">
        <component is="style" />
        <div class="flex-column-fill padding-lr-20 padding-bottom-20">
            <el-descriptions title="用户信息" column="4">
                <template #title>
                    <el-card body-style="text-align: center;">
                        <el-button type="primary" icon="el-icon-plus" circle v-on:click="openEdit()"></el-button>
                    </el-card>
                </template>
                <el-descriptions-item v-for="item in urlList">
                    <el-card>
                        <div slot="header" class="flex-row">
                            <span :class="[item.type==2?'fa fa-file-image-o color-blue':'fa fa-file-video-o color-greenA']"></span>
                            <span :class="[item.show==1?'':'color-redLight','margin-left-6']">{{item.text}}</span>
                            <el-button class="margin-left-6" :icon="[item.isMain==1?'el-icon-open':'el-icon-turn-off']" :type="item.isMain==1?'danger':''" size="mini" circle v-on:click="isMainChange(item)"></el-button>
                            <div class="flex-row-fill text-right">
                                <el-button type="text" v-on:click="openEdit(item)">编辑</el-button>
                                <el-switch class="margin-left-8" v-model="item.show" v-on:change="showChange(item)" :active-value="1" :inactive-value="0">
                                </el-switch>
                            </div>
                        </div>
                        <div class="text item">
                            <div class="flex-row">URL：<el-link class="flex-row-fill" type="primary" :href="item.url" target="_blank">{{item.url}}</el-link></div>
                            <div class="flex-row">groupKey：<el-link class="flex-row-fill" type="info" :underline="false" v-on:click="copy(item.groupKey)">{{item.groupKey}}</el-link></div>
                            <div>title：<el-link type="info" :underline="false">{{item.title}}</el-link></div>
                            <div>ID：{{item.id}}</div>
                        </div>
                    </el-card>
                </el-descriptions-item>
            </el-descriptions>
            
        </div>
        <el-drawer custom-class="el-drawer-fix" :visible="show" v-on:close="show=false" size="600px" title="修改" :destroy-on-close="true" :close-on-press-escape="false" :wrapper-closable="false">
            <div class="flex-column hidden" style="position:absolute;top:0;bottom:0;left:0;right:0;">
                <div class="flex-column-fill hidden-x" style="padding-bottom:50px;">
                    <el-form ref="form" :model="obj" label-width="90px" size="small" class="padding-10" :rules="rules">
                        <el-form-item label="标题" prop="text" required>
                            <el-input v-model="obj.text" placeholder="请输入标题" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="归属" prop="title" required>
                            <el-input v-model="obj.title" placeholder="请输入归属地" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="归属网址" prop="mianUrl" >
                            <el-input v-model="obj.mianUrl" placeholder="归属地地址" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="URL" prop="url" required>
                            <el-input v-model="obj.url" placeholder="请输入URL" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="groupKey" prop="groupKey">
                            <el-input v-model="obj.groupKey" placeholder="请输入groupKey" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="显示隐藏" prop="show" required>
                            <el-switch v-model="obj.show" :active-value="1" :inactive-value="0"></el-switch>
                        </el-form-item>
                        <el-form-item label="图片/视频" prop="type" required v-removeAriaHidden>
                            <el-radio-group v-model="obj.type">
                                <el-radio :label="2">图片</el-radio>
                                <el-radio :label="4">视频</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="padding-10 border-top-solid border-greyLight">
                    <el-button-group size="small">
                        <el-button type="info" plain v-on:click="show=false" size="small">取 消</el-button>
                        <el-button type="primary" size="small" v-on:click="submit">保 存</el-button>
                    </el-button-group>
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script>
    module = (function (hxt) {
        return {
            name: 'img',
            props: {

            },
            data: function () {
                var _this = this, optor = hxt.store.optor;
                return {
                    optor: optor,
                    urlList: [],
                    obj: {
                        text: '', title: '', groupKey : '',
                        url: '', mianUrl: '', show: 1, type: 2, optType: 0
                    },
                    oldObj:'',
                    show: false,
                    rules: {
                        title: [{
                            required: true,
                            message: '请输入归属',
                            trigger: 'change'
                        }],
                        text: [{
                            required: true,
                            message: '请输入标题',
                            trigger: 'change'
                        }],
                        url: [{
                            required: true,
                            message: '请输入URL',
                            trigger: 'change'
                        }]
                    },
                }
            },
            computed: {

            },
            watch: {
               
            },
            activated: function () {
            },
            mounted: function () {
                var _this = this;
                _this.loadTitle();
            },
            methods: {
                loadTitle: function () {
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link + 'pc/mediaTitle',
                        data: {},
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('获取媒体组失败：' + res.errmsg);
                            _this.urlList = res.data;
                        }
                    });
                },
                openEdit: function (g) {
                    var _this = this;
                    if (!!g) {
                        _this.obj = JSON.parse(JSON.stringify(g));
                        _this.obj.optType = 1;
                        _this.oldObj = JSON.stringify(_this.obj);
                        _this.show = true;
                        return;
                    };
                    _this.obj.text = '';
                    _this.obj.title = '';
                    _this.obj.groupKey = '';
                    _this.obj.url = '';
                    _this.obj.mianUrl = '';
                    _this.obj.show = 1;
                    _this.obj.type = 2;
                    _this.obj.optType = 0;
                    _this.show = true;
                },
                copy: function (txt) {
                    var _this = this;
                    navigator.clipboard.writeText(txt)
                        .then(function () {
                            hxt.success("复制成功");
                        })
                        .catch(function (err) {
                            hxt.error("复制失败：" + err);
                            console.error('Failed to copy text: ', err);
                        });
                },
                submit: function () {
                    var _this = this;
                    if (_this.oldObj == JSON.stringify(_this.obj)) return hxt.msg('未做更改');
                    hxt.validateElForm(_this, "form", function () {
                        hxt.post({
                            url: hxt.config.link + 'pc/mediaTitleSave',
                            data: _this.obj,
                            ok: function (res) {
                                if (res.code != 0) return hxt.error('保存失败：' + res.errmsg);
                                hxt.success('保存成功');
                                _this.loadTitle();
                                _this.show = false;
                            }
                        });
                    });
                },
                showChange: function (g) {
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link + 'pc/mediaTitleSave',
                        data: { optType: 2, show: g.show, id: g.id },
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('操作失败：' + res.errmsg);
                            hxt.success('操作成功');
                        }
                    });
                },
                isMainChange: function (g) {
                    var _this = this;
                    hxt.confirm('确定将【' + g.text + '】设为主页？', function () {
                        hxt.post({
                            url: hxt.config.link + 'pc/mediaTitleSave',
                            data: { optType: 3, id: g.id },
                            ok: function (res) {
                                if (res.code != 0) return hxt.error('操作失败：' + res.errmsg);
                                hxt.success('操作成功');
                                _this.loadTitle();
                            }
                        });
                    });
                    
                }
            },
            components: {
            }
        };
    })(window.$jscript.fn);
</script>
<style>
    .el-tab-pane {
        height: 100%;
    }

    .el-tabs__content {
        flex: 1;
    }

    .el-tabs--border-card > .el-tabs__content {
        padding: 0px !important;
    }

    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>